<!--组件-二级菜单-->
<template>
  <scroller class="scroller" show-scrollbar="false" :scroll-direction="'horizontal'">

    <div class="buts" v-for="(name, index) in menus" v-bind:key="index"  @click="menuClick(index)">
      <div class="but">
        <text :class="['font34', 'text', menu == index ? 'text2' : 'text3', 'fontz']">{{name}}</text>
      </div>
      
      <div :class="['line', menu == index ? 'main1' : '']"></div>
    </div>
  </scroller>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.scroller {
  flex-direction: row;
  height: 100px;
  padding-left: 20px;
}

.buts {
  flex-direction: column;
  align-items: center;
}
.but {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

.text {
  text-align: center;
  lines:1;
  text-overflow: ellipsis;
}
.line {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  margin-top: 20px;
}
</style>

<script>

export default {
  props:{
    type:{
      type:Number,
      default:0, //0左对齐，1均分
    },

    menu: {
      type:Number,
      default:0, //0左对齐，1均分
    },

    menus: {
      type:Array,
      default:[], //0左对齐，1均分
    },
  },
  
  data() {
    return {
    };
  },

  mounted(){
    
  },

  methods:{

    /********************************** 点击触发*/
    menuClick(index){
      this.$emit("menuClick",index);
    },
  }
}
</script>
